<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url('preview.jpg'); /* 添加背景图片 */
            background-size: cover; /* 覆盖整个页面 */
            background-position: center; /* 居中显示 */
            background-repeat: no-repeat; /* 不重复 */
        }
        .logo {
            width: 60%; /* 使logo宽度与输入框相同 */
            height: auto;
            margin-bottom: 20px;
            margin-top: -80px; /* 将logo上移30个单位 */
        }
        .custom-form {
            background: rgba(247, 247, 247, 0.8); /* 半透明背景 */
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            padding: 60px; /* 增加padding使高度增加 */
            margin-top: -110px; /* 将整个表单上移70个单位 */
            width: calc(100% - 120px); /* 减去左右各40个单位 */
            margin-left: auto;
            margin-right: auto;
        }
        /* 使输入框和按钮的宽度与容器相同 */
        .form-control, .btn {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container mt-5 text-center">
    <img src="天津科技大学 logo.png" alt="Logo" class="logo"> <!-- 确保路径和文件名正确 -->
    <div id="loginForm" class="card custom-form">
        <h2 class="mb-4">登录</h2>
        <form id="loginFormSubmit">
            <div class="mb-3">
                <label for="usernameLogin" class="form-label">用户名</label>
                <input type="text" class="form-control" id="usernameLogin" placeholder="请输入用户名">
            </div>
            <div class="mb-3">
                <label for="passwordLogin" class="form-label">密码</label>
                <input type="password" class="form-control" id="passwordLogin" placeholder="请输入密码">
            </div>
            <button type="submit" class="btn btn-primary w-100">登录</button>
            <p class="mt-3 text-center"><a href="#" onclick="toggleForms()">没有账号？点击这里注册</a></p>
        </form>
    </div>

    <div id="registerForm" class="card custom-form d-none">
        <h2 class="mb-4">注册</h2>
        <form id="registerFormSubmit">
            <div class="mb-3">
                <label for="usernameRegister" class="form-label">用户名</label>
                <input type="text" class="form-control" id="usernameRegister" placeholder="请输入用户名">
            </div>
            <div class="mb-3">
                <label for="passwordRegister" class="form-label">密码</label>
                <input type="password" class="form-control" id="passwordRegister" placeholder="请输入密码">
            </div>
            <div class="mb-3">
                <label for="confirmPassword" class="form-label">确认密码</label>
                <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码">
            </div>
            <button type="submit" class="btn btn-primary w-100">注册</button>
            <p class="mt-3 text-center"><a href="#" onclick="toggleForms()">已有账号？点击这里登录</a></p>
        </form>
    </div>
</div>

<script>
    function toggleForms() {
        var login = document.getElementById('loginForm');
        var register = document.getElementById('registerForm');

        if (login.classList.contains('d-none')) {
            login.classList.remove('d-none');
            register.classList.add('d-none');
        } else {
            login.classList.add('d-none');
            register.classList.remove('d-none');
        }
    }

    // 登录表单提交处理
    document.querySelector('#loginForm form').addEventListener('submit', function(event) {
        event.preventDefault();

        const username = document.getElementById('usernameLogin').value;
        const password = document.getElementById('passwordLogin').value;

        fetch('http://localhost:8080/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.text();
            })
            .then(data => {
                if (data === "登录成功") {
                    localStorage.setItem("username", username);
                    alert("登录成功");
                    window.location.href = 'sy.html';
                } else {
                    alert("用户名或密码错误");
                }
            })
            .catch(error => {
                console.error('登录失败:', error);
                alert('登录失败，请检查您的输入或联系管理员。');
            });
    });

    // 注册表单提交处理
    document.querySelector('#registerForm form').addEventListener('submit', function(event) {
        event.preventDefault();

        const username = document.getElementById('usernameRegister').value;
        const password = document.getElementById('passwordRegister').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (password !== confirmPassword) {
            alert("两次输入的密码不一致");
            return;
        }

        fetch('http://localhost:8080/api/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.text();
            })
            .then(data => {
                if (data === "注册成功") {
                    alert("注册成功");
                } else {
                    alert("注册失败");
                }
            })
            .catch(error => {
                console.error('注册失败:', error);
                alert('注册失败，请检查您的输入或联系管理员。');
            });
    });
</script>
</body>
</html>